<template>
  <el-table
    ref="filterTable"
    :data="tableData"
    border
    style="width: 100%; border-radius: 5px"
  >
    <el-table-column type="index" label="编号" width="50" align="center">
    </el-table-column>
    <el-table-column prop="name" label="权限名称" width="400">
    </el-table-column>
    <el-table-column prop="way" label="路径"> </el-table-column>
    <el-table-column
      prop="grade"
      label="权限等级"
      width="400"
      :filters="[
        { text: '一级', value: '一级' },
        { text: '二级', value: '二级' },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.grade === '一级' ? 'primary' : 'success'"
          disable-transitions
          >{{ scope.row.grade }}</el-tag
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "PermissionDetails",
  data() {
    return {
      tableData: [
        {
          name: "商品管理",
          way: "arrt",
          grade: "一级",
        },
        {
          name: "订单管理",
          way: "arrt",
          grade: "一级",
        },
        {
          name: "权限管理",
          way: "arrt",
          grade: "一级",
        },
        {
          name: "数据统计",
          way: "arrt",
          grade: "二级",
        },
      ],
    };
  },
  methods: {
    filterTag(value, row) {
      return row.grade === value;
    },
  },
};
</script>

<style>
</style>